<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <ng-container *ngFor="let profit of profitSettingArr; let i = index;">
      <nz-form-item>
        <nz-form-label [nzSpan]="4" [nzFor]="'key_' + profit.key">收益人</nz-form-label>
        <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['key_' + profit.key]">
          <nz-select [formControlName]="'key_' + profit.key" [nzPlaceHolder]="'收益人(输入要设置的受益人进行搜索)'" [nzServerSearch]="true" [nzShowSearch]="true" (nzOnSearch)="onSearch($event)" [nzAllowClear]="true">
            <ng-container *ngFor="let option of fansList">
              <nz-option *ngIf="!loadingOption" [nzValue]="option.id" [nzLabel]="option.name"></nz-option>
            </ng-container>
            <nz-option *ngIf="loadingOption" nzDisabled nzCustomContent>
              <i nz-icon type="loading" class="loading-icon"></i> 搜索中
            </nz-option>
          </nz-select>
          <nz-form-explain *ngIf="validateForm.get('key_' + profit.key).dirty && validateForm.get('key_' + profit.key).hasError('required')">请选择收益人</nz-form-explain>
        </nz-form-control>
        <nz-form-label [nzSpan]="4" [nzFor]="'value_' + profit.key">收益比率</nz-form-label>
        <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['value_' + profit.key]">
          <nz-input-number style="width: 90%;" [nzMin]="0" [nzMax]="1" [nzStep]="0.1" [nzPrecision]="5"
                           [formControlName]="'value_' + profit.key" [nzPlaceHolder]="'收益比率'"></nz-input-number>
          <button style="width: 32px;" nz-button [nzType]="'danger'" type="button" title="删除这条收益设置" (click)="remove(i,profit.key)">
            <i class="anticon anticon-minus"></i>
          </button>
          <nz-form-explain *ngIf="validateForm.get('value_' + profit.key).dirty && validateForm.get('value_' + profit.key).hasError('required')">请输入收益比率</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </ng-container>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" style="visibility: hidden;"></nz-form-label>
      <button nz-button  type="button" [nzType]="'default'" title="添加受益人" (click)="add()">
        <i class="anticon anticon-plus"></i>点击添加收益人
      </button>
    </nz-form-item>
    <div nz-form-item nz-row  style="text-align: center;border-top: 1px solid #d0d0d0; padding-top: 12px;">
      <button nz-button type="submit" [nzType]="'primary'" >保存</button>
    </div>
  </form>

  <ng-container *ngIf="entity.id">
    <h2><i class="anticon anticon-exception"></i>  收益记录</h2>
    <app-fans-profits *ngIf="!isLoading" [type]="2" [entityId]="entity.id"></app-fans-profits>
  </ng-container>
</nz-card>
